<template>
    <div id="app">
        <!-- 总操作 -->
        <Menu mode="horizontal" active-name="1" >
          <MenuItem name="1" @on-select="addcomment">
            <!-- <Button type="success" @click="addcomment">添加评论</Button> -->
             <Button @click="addcomment"> 添加评论</Button>
          </MenuItem>
          <MenuItem name="2">
           <!-- <Button type="warning" @click="deleteMany">批量删除</Button> -->
             <Button @click="selectcomment.toString()?modal2=true:modal22=true"> 批量删除</Button>
          </MenuItem>
          <MenuItem name="3" style="padding-top:15px">
           <Input search enter-button placeholder="请输入用户名.." @on-search="searchuser" />
          </MenuItem>
        </Menu>
        <!-- teble内容 -->
        <Table border :columns="columns" :data="list" @on-selection-change="selectcomment=$event"></Table>
        <!-- teble内容 -->
        <div>
            <Page :total="total" size="small" show-elevator show-sizer @on-change='onChangPage' :page-size-opts="[5,10,15,20]" :page-size="pageSize" @on-page-size-change="onChangePageSize"/>
        </div>
        <!-- 查看内容模块 -->
        <Modal
            v-model="modal1"
            title="Common Modal dialog box title"
          >
            <p>{{modal1Content}}</p>
          
        </Modal>
        <!-- form 表单模块 -->
        <Modal v-model="modal12" :mask-closable='false' scrollable footer-hide title="Modal 1">
             <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
                <FormItem label="id" prop="newsid" style="width:0px;height:0px;overflow:hidden">
                    <Input v-model="formValidate.newsid" placeholder="id"></Input>
                </FormItem>
                <FormItem label="评论者:" prop="user">
                    <Input v-model="formValidate.user" placeholder="请输入评论者"></Input>
                </FormItem>
                <FormItem label="赞:" prop="like">
                    <Input v-model="formValidate.like" placeholder="请输入赞"></Input>
                </FormItem>
                <FormItem label="踩:" prop="unlike">
                    <Input v-model="formValidate.unlike" placeholder="请输入踩"></Input>
                </FormItem>
                <FormItem label="评论时间">
                    <Row>
                        <Col span="11">
                            <FormItem prop="time">
                                <DatePicker type="date" placeholder="Select date" v-model="formValidate.time"></DatePicker>
                            </FormItem>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="是否作者评论" prop="isauthor">
                    <RadioGroup v-model="formValidate.isauthor">
                        <Radio label="true">是</Radio>
                        <Radio label="false">否</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="评论内容" prop="content">
                    <Input v-model="formValidate.content" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入您的评论"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
                </FormItem>
            </Form>
        </Modal>
        <!-- 查看回复 -->
        <Modal v-model="modalTree">
          <Tree :data="dataTree"></Tree>
        </Modal>
        <!-- 批量删除确认模块 -->
        <Modal v-model="modal2" width="360">
            <p style="color:#f60;text-align:center">
                <Icon type="ios-information-circle"></Icon>
                <span>您确定要删除所选内容吗？</span>
            </p>
            <div slot="footer">
                <Button type="error" size="large" long :loading="modal_loading" @click="deleteMany">确定删除</Button>
            </div>
        </Modal>
        <modal v-model='modal22' width="360">
          请选择内容
        </modal>
    </div>
</template>
<script>
let moment=require('moment')
export default {
  data() {
    return {
      modal2:false,
      modal22:false,
      modal_loading:false,
      selectcomment:[],
      dataTree:[],
      modalTree:false,
      newsid:'',
      formValidate0:{
        newsid: '',
        user: '',
        like: '',
        unlike: '',
        time: '',
        isauthor:'false',
        content: ''
      },
      formValidate: {
        newsid: '',
        user: '',
        like: '',
        unlike: '',
        time: '',
        isauthor:'false',
        content: ''
      },
      ruleValidate: {
          name: [
              { required: true, message: 'The name cannot be empty', trigger: 'blur' }
          ],
          mail: [
              { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
              { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
          ],
          city: [
              { required: true, message: 'Please select the city', trigger: 'change' }
          ],
          gender: [
              { required: true, message: 'Please select gender', trigger: 'change' }
          ],
          interest: [
              { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
              { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
          ],
          desc: [
              { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
              { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
          ]
      },
      modal1Content: "",
      modal1: false,
      modal12: false,
      page: 1,
      pageSize: 5,
      total:5,
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "文章id",
          key: "newsid"
        },
        {
          title: "评论者",
          key: "user"
        },
        {
          title: "赞",
          key: "like",
          align:'right'
        },
        {
          title: "踩",
          key: "unlike",
          align:'right'
        },
        {
          title: "评论时间",
          key: "time",
          width:150,
          render:(h,params)=>{
              return h('span',moment(params.time).format('YYYY-MM-DD HH:MM'))
          }
        },
        {
          title: "是否作者评论",
          key: "isauthor",
          width:120,
          align:'center',
          render:(h,params)=>{
            var text='否';
            if(params.row.isauthor){
              text='是'
            }
            return h('span',text)
          }
        },
        {
          title: "操作",
          key: "_id",
          width: 320,
          align: "center",
          render: (h, params) => {
            var _id=params.row._id;
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.modal1 = true;
                      this.getContent(_id);
                      this.modal1 = true;
                    }
                  }
                },
                "查看评论"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.searchReply(_id);
                    }
                  }
                },
                "查看回复"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.updatecomment(_id);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.deletelist(_id);
                    }
                  }
                },
                "删除"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.replycomment(_id);
                    }
                  }
                },
                "回复"
              )
            ]);
          }
        }
      ],
      list: [],
      seletion:[],
    };
  },
  methods: {
   searchuser(val){
     this.axios({
       url:config.dataBaseUrl+"comment/lists/"+val,
       method:'post',
       data:{
         newsid:this.newsid
       }
     }).then(res=>{
       this.list=res.data.rows;
     })
   },
    addcomment(){
      this.modal12=true
    },
    searchReply(id){
      this.axios({
        url:config.dataBaseUrl+"comment/list/"+id,
        method:'post'
      })
      .then((res)=>{
        this.dataTree=res.data;
        this.modalTree=true;
      })
    },
    deleteMany(){
      this.modal_loading = true;
      let ids=[];
      for(var prop of this.selectcomment){
        ids.push(prop._id);
      }
      setTimeout(() => {
         this.axios({
        url:config.dataBaseUrl+'comment/removes',
        method:'post',
        data:{
          ids:ids
        }
      })
      .then((res)=>{
        this.getlist(this.newsid);
        this.modal_loading = false;
        this.modal2 = false;
        this.$Message.success('Successfully delete');
      })
      },1000);
    },
    replycomment(id){
      this.formValidate.parentId=id;
      this.modal12=true;
    },
    updatecomment(id){
     
      this.axios({
        url:config.dataBaseUrl+'comment/'+id,
        method:'get'
      }).then((res)=>{
        res.data.isauthor=res.data.isauthor.toString();
        this.formValidate=res.data;
        this.modal12=true;
      })
    },
    deletelist(id) {
      this.$Modal.confirm({
        title: '删除信息',
        content: '<p>您确认要删除吗</p>',
        onOk: () => {
          this.axios({
          url: config.dataBaseUrl + "comment/" + id,
          method: "delete"
          }).then(res => {
            this.$Message.info('删除成功');
            this.getlist(this.newsid);
          });          
        },
        onCancel: () => {
            this.$Message.info('取消删除');
        }
      });
    },
    getContent(id) {
      this.axios({
        url: config.dataBaseUrl + "comment/" + id,
        method: "get"
      }).then(res => {
        this.modal1Content = res.data.content;
      });
    },
    getlist(newsid) {
      this.axios({
        url: config.dataBaseUrl + "comment/news/"+newsid,
        method: "post",
        data: {
          page: this.page,
          rows: this.pageSize
        }
      }).then(res => {
        this.list = res.data.rows;
        this.total=res.data.total;
      });
    },
    onChangePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getlist(this.newsid);
    },
    onChangPage(page) {
      this.page = page;
      this.getlist(this.newsid);
    },
    show(index) {
      this.$Modal.info({
        title: "User Info",
        content: `Name：${this.data6[index].name}<br>Age：${
          this.data6[index].age
        }<br>Address：${this.data6[index].address}`
      });
    },
    remove(index) {
      this.data6.splice(index, 1);
    },
    handleSubmit (name) {
        this.formValidate.newsid=this.newsid;
        this.$refs[name].validate((valid) => {
            if (valid) {
              if(this.formValidate._id){
                this.axios({
                  url:config.dataBaseUrl+"comment/"+this.formValidate._id,
                  method:'put',
                  data:this.formValidate
                })
                .then((res)=>{{
                  this.$Message.success('Success!');
                  this.modal12=false;
                  this.handleReset(name);
                  this.getlist(this.newsid);
                }})
                .catch((err)=>{
                  console.log('err=>'+err);
                })
              }else{
                this.axios({
                  url:config.dataBaseUrl+"comment",
                  method:'post',
                  data:this.formValidate
                }).then((res)=>{
                  this.$Message.success('Success!');
                  this.modal12=false;
                  this.handleReset(name);
                  this.getlist(this.newsid);
                })
              }
               
            } else {
                this.$Message.error('Fail!');
            }
        })
    },
    handleReset (name) {
    this.$refs[name].resetFields();
    }
  },
  watch:{
    modal12(now,old){
     if(!now){
       this.formValidate=this.formValidate0;
     }
    }
  },
  mounted() {
    this.newsid=this.$route.params.newsid;
    this.getlist(this.newsid);
  }
};
</script>
